<template>
  <div id="sms">
    <div class="sms-title">未注册的手机号验证后自动创建新账号</div>
    <div class="sms-panel">
      <van-cell-group>
        <van-field
          v-model="value"
          label-width="1rem"
          type="number"
          name="手机号"
          label="+86"
          readonly
          placeholder="请输入手机号码"
          @focus="focus"
          clearable
          :error-message="erro"
          maxlength="11"
        />
      </van-cell-group>
      <Protocol @getcheck="getcheck" />
      <LoginBtn :state="state" :userobj="userobj" />
      <div class="tablogin">
        <span @click="goAccount">账号密码登录</span>
      </div>
      <van-number-keyboard
        :show="show"
        @blur="blur"
        @input="onInput"
        @delete="onDelete"
      />
    </div>
  </div>
</template>

<script>
import Protocol from "@/components/login/Protocol.vue";
import LoginBtn from "@/components/login/LoginBtn.vue";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    let value = ref("");
    const state = reactive({
      flag: true,
      color: "#9DCDFE",
      title: "获取短信验证码",
      check: null,
    });
    const userobj = reactive({
      account: value,
    });
    let show = ref(false);
    let erro = ref("");
    const reg = /^1[3-8]\d{9}$/;
    const router = useRouter();

    const focus = () => {
      show.value = true;
    };
    const goAccount = () => {
      router.replace("/login/accountlogin");
    };
    const getcheck = (val) => {
      state.check = val;
    };
    const onInput = (val) => {
      value.value += val;
      if (value.value.length === 11) {
        if (reg.test(value.value)) {
          state.flag = false;
          state.color = "blue";
          erro.value = "";
        } else {
          erro.value = "请输入正确的手机号";
        }
      }
    };
    const blur = () => {
      show.value = false;
      if (value.value.length < 11) {
        state.flag = true;
        state.color = "#9DCDFE";
        erro.value = "请输入正确的手机号";
      } else {
        state.flag = false;
        state.color = "blue";
        erro.value = "";
      }
    };
    const onDelete = () => {
      value.value = value.value.substring(0, value.value.length - 1);
    };
    return {
      show,
      value,
      state,
      erro,
      goAccount,
      blur,
      onInput,
      getcheck,
      focus,
      onDelete,
      userobj,
    };
  },
  components: { Protocol, LoginBtn },
};
</script>
<style lang="less">
#sms {
  .sms-title {
    padding: 10px 0;
    font-size: 12px;
    color: rgb(119, 117, 117);
  }
  .sms-panel {
    padding-top: 20px;
    .tablogin {
      padding-top: 15px;
      span {
        font-size: 12px;
        color: #3f95d7;
      }
    }
  }
}
</style>
